<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带看</title>
    <script src="../../res/js/jquery-3.4.1.min.js"></script>
    <script src="../../res/layui/layui.js" charset="utf-8"></script>
    <script src="../../res/js/Tools.js"></script>
    <link rel="stylesheet" href="../../res/layui/css/layui.css" media="all">
    <link href="../../res/echarts/eleTree.css" rel="stylesheet"/>
    <script src="../../res/echarts/eleTree.js"></script>
    <script src="../../res/js/login_common.js" charset="utf-8"></script>
    <style type="text/css">
        body {
            padding: 10px;
        }

        .fonts {
            line-height: 40px;
        }

        .deletes {
            width: 60px;
            height: 40px;
            /*border:1px solid;*/
            float: right;
            color: #0aafe6;
        }

        .deletes:hover {
            cursor: pointer;
            color: #bd2c00
        }
    </style>

</head>
<body>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="see">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<form class="layui-form" action="">
    <div class="layui-form-item">
        <input type="hidden" name="guideId" id="guideId"/>
        <div class="layui-inline">
            <label class="layui-form-label">客户名：</label>
            <div class="layui-input-inline">
                <!--<input type="text" name="clientName" id="clientName" lay-verify="required" placeholder="请输入客户名（必填）"
                       autocomplete="off"
                       class="layui-input">-->
                <div class="fonts" id="clientName">

                </div>
            </div>
        </div>
        <div class="layui-inline">

        </div>
    </div>

    <div class="layui-form-item">
        <button id="addHouse" type="button" class="layui-btn">新增带看</button>
        <fieldset class="layui-elem-field">
            <legend>带看信息：</legend>
            <table id="demo" lay-filter="test"></table>
        </fieldset>
        <!--<div class="layui-inline">
            <label class="layui-form-label" style=" margin-top: 20px;margin-left:10px;font-size: 15px">选择房屋:</label>
            <div class="layui-input-inline">
                <div id="houses" style="width: 300px; margin-top: 20px;"></div>
            </div>
        </div>-->
    </div>

    <input type="hidden" name="clientId" id="clientId"><!-- 客户id-->

    <!--<div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" id="sub">提交</button>
        </div>
    </div>-->
</form>


<script>

    var showPhone;
    var table2;
    layui.use(['form', 'layedit', 'laydate', 'layer', 'table', 'upload'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , table = layui.table
            , upload = layui.upload;
        //设置文本域
        /* var index = layedit.build('guideName', {
             tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right', 'link', 'unlink', 'face'],//设置需要的控件
             height: 260 //设置高度
         });*/
        //第一个实例
        /*table.render({
            elem: '#demo'
            , url: '../../guideAction/findHouseAll' //数据接口
            , page: false //开启分页
            , cols: [[ //表头
                {field: 'houseName', title: '带看房源', width: 80, sort: true, fixed: 'left'}
                , {field: 'guideData', title: '带看时间', width: 80}
            ]]
        });*/
        var clientId = getQueryString("clientId");

        var url = "../../guideAction/findClientId";
        var data = {clientId: clientId};
        $.post(url, data, function (obj) {
            $("#clientName").html(obj.clientName);
            $("#clientId").val(obj.clientId);
            table2 = table.render({
                elem: '#demo'
                , url: '../../guideAction/findHouseAll?clientId=' + clientId
                , title: '房屋信息管理'
                , cols: [[ //表头
                    {field: 'houseName', title: '带看房源', width: 180}
                    , {field: 'userName', title: '带看人员', width: 100}
                    , {
                        field: 'guideData', title: '带看时间', width: 160, templet: function (row) {
                            if (row.guideData) {
                                return dateFormat("yyyy-MM-dd hh:mm:ss", new Date(row.guideData));
                            } else {
                                return "";
                            }
                        }
                    }
                    , {field: 'guideName', title: '描述', width: 150}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                ]]
                , page: false
            });

            /*var url = "../../guideAction/findGuideUser";
            $.get(url, {guideId: obj.guideId}, function (objs) {
                $("#users").html("");
                $.each(objs, function (index, item) {
                    $("#users").append('<div class="layui-btn layui-btn-normal">' + item.userName + '<a href="javascript:deleteGuideUser(\'' + item.guideUserId + '\')"><span class="layui-badge layui-bg-gray">X</span></a></div>')
                })
            }, "json");*/

            //查询关联图片
            /*var url = "../../guideAction/findGuideImgAll";
            var data = {id: obj.guideId};
            $.post(url, data, function (objs) {
                $("#houseImg").html("");
                $.each(objs, function (index, item) {
                    $("#houseImg").append('<div id="' + item.guideImgId + '" style="border: #0C0C0C 2px solid;height: 200px;width: 200px;float: left;margin: 10px"> <a href="javascript:deleteImg(\'' + item.guideImgId + '\')"><span class="layui-badge">X</span></a><a href="javascript:imgShow(\'' + item.imgUrl + '\')"><div style="margin-top: -18px;height: 200px;width:200px;background-image: url(\'' + item.imgUrl + '\');background-size:100% 100%;"></div></a></div>');
                })
            }, "json");*/
            form.render();
        }, "json");

        //查询关联图片
        var url = "../../houseAction/selectImg";
        var data = {guideId: $("#guideId").val()};
        $.post(url, data, function (obj) {

            $.each(obj, function (index, item) {
                $("#houseImg").append('<div id="' + item.imgGuideId + '"><div><a class="layui-btn layui-btn-danger" onclick="deleteImg(\'' + item.imgGuideId + '\')">删除</a></div><img src="' + item.imgUrl + '" /><input name="clientImg" type="hidden" value="' + item.imgUrl + '" /></div><hr>');
            })
        }, "json");

        // 修改赋值
        var clientId = getQueryString("clientId");
        //监听提交
        form.on('submit(demo1)', function (data) {
            var url = "../../guideAction/addGuide";
            /*console.info(data.field);
            var house = houses.getValue()
            if (house.length > 0) {
                $.each(houses.getValue(), function (index, item) {
                    house.push(item.value + "_" + item.name)
                })
            }
            data.field.houseId = house;*/
            $.post(url, data.field, function (obj) {
                if (obj > 0) {
                    window.parent.location.reload();//刷新父页面
                    //window.location.reload();//刷新页面
                    /*var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index);*/
                }
            }, "json")
            return false;
        });


        /*//加载组件
        layui.config({
            base: '../../res/echarts/'
        }).extend({
            xmSelect: 'xm-select'
        }).use(['xmSelect'], function () {
            var xmSelect = layui.xmSelect;
            var url = "../../houseOrClientAction/selectHouseAll";
            var datas = null;
            if (clientId) {
                datas = {"id": clientId};
            }
            $.post(url, datas, function (obj) {
                //渲染多选
                houses = xmSelect.render({
                    el: '#houses',
                    data: obj
                })
            }, "json")
        });*/

        //下拉复选框取值
        /*$("#demo1-getValue").on("click", function () {
            var selectArr = clients.getValue();

            console.info(selectArr);
        });*/
        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function () {
            var data = form.val('example');
            alert(JSON.stringify(data));
        });


        //showStreet(clientId);

        /*if (clientId) {
            $("#clientId").val(clientId);
            var url = "../../clientAction/findById";
            var data = {"id": clientId};
            $.post(url, data, function (obj) {
                $("#clientName").html(obj.clientName);                          // 客户名称
                $("#clientIdentity").html(obj.clientIdentity);                  // 编号
                $("#clientPhone").html(clientPhones(obj.clientPhone));          // 电话
                $("#clientState").html(obj.clientState + "㎡-" + obj.clientStates + "㎡");   // 需求面积
                $("#clientIndustry").html(obj.clientIndustry);                  // 业态
                $("#clientMoney").html(obj.clientMoney + "-" + obj.clientPayment);  // 金额范围
                //$("#clientPayment").val();                                    // 最高金额
                $("#clientSource").html(obj.clientSource);                      // 来源
                //$("#remark").val(obj.remark);                                 // 备注
                showPhone = obj.clientPhone;

                $("#clientSex").html(obj.clientSex == 0 ? "女" : "男"); // 性别
                /!*$("input[name=clientState][value='0']").attr("checked", obj.clientState == 0 ? true : false);
                $("input[name=clientState][value='1']").attr("checked", obj.clientState == 1 ? true : false);
                $("input[name=clientPayment][value='0']").attr("checked", obj.clientPayment == 0 ? true : false);
                $("input[name=clientPayment][value='1']").attr("checked", obj.clientPayment == 1 ? true : false);
                $("input[name=clientPayment][value='2']").attr("checked", obj.clientPayment == 2 ? true : false);
                $("input[name=clientPayment][value='3']").attr("checked", obj.clientPayment == 3 ? true : false);
                clients.setValue();*!/
                form.render();
            }, "json")

            $("#showPhone").on("click", function () {

                var url = "../../streetAction/addOrUpdate";
                var data = {streetName: 0, sectorId: clientId, sectorName: "查看电话"};
                $.post(url, data, function (obj) {
                    if (obj.num > 0) {
                        $("#clientPhone").html('<a href="tel://' + showPhone + '" style="color: #00aeff">' + showPhone + '</a>');
                        showStreet(clientId);
                    }

                }, "json");
            })

        }*/

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    var url = "../../guideAction/deleteGuideHouse";
                    var datas = {"guideHouseId": data.guideId}
                    $.post(url, datas, function (obj) {
                        if (obj > 0) {
                            table2.reload();
                            layer.msg('删除成功', {icon: 1});
                        } else {
                            layer.msg("删除失败");
                        }
                    }, "json")
                });
            }else if(obj.event === 'see'){
                layer.open({
                    type: 2,
                    title: '详情',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['90%', '90%'],
                    content: 'guide/guideUser.html?guideId=' + data.guideId
                });
            }else if(obj.event === 'edit'){
                layer.open({
                    type: 2,
                    title: '修改',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['90%', '90%'],
                    content: 'guide/guideHouse.html?guideId=' + data.guideId+'&clientId='+data.clientId
                });
            }
        });

        /* form.verify({
             conten: function (value) {
                 return layedit.sync(index);
             }
         });*/

        form.render();


        $("#addHouse").on("click", function () {
            layer.open({
                type: 2,
                title: '新增',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['90%', '90%'],
                content: 'guide/guideHouse.html?clientId=' + $("#clientId").val()
            });
        })


        /*$("#addUser").on("click", function () {
            layer.open({
                type: 2,
                title: '新增人员',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['90%', '250px'],
                content: 'guide/guideUser.html?guideId=' + $("#guideId").val()
            });
        });*/

    });

    /*function deleteGuideUser(guideUserId) {
        var url = "../../guideAction/deleteGuideUser";
        $.post(url, {id: guideUserId}, function (obj) {
            if (obj > 0) {
                var url = "../../guideAction/findGuideUser";
                $.get(url, {guideId: obj.guideId}, function (objs) {
                    $("#users").html("");
                    $.each(objs, function (index, item) {
                        $("#users").append('<div class="layui-btn layui-btn-normal">' + item.userName + '<a href="javascript:deleteGuideUser(\'' + item.guideUserId + '\')"><span class="layui-badge layui-bg-gray">X</span></a></div>')
                    })
                }, "json");
                layer.msg("删除成功")
            } else {
                layer.msg("删除失败")
            }

        }, "json")
    }*/

    function clientPhones(clientPhone) {
        var phone = clientPhone.substr(0, 3);
        var backphone = clientPhone.substr(7, 4);
        return phone + "****" + backphone;
    }

    /*function showStreet(clientId) {
        var url = "../../streetAction/findAll";

        $.post(url, {sectorId: clientId, streetName: "0"}, function (obj) {
            $("#TenementStreet").html("");
            $.each(obj, function (index, item) {
                console.info(window.loginObj.manager.userType)
                if (window.loginObj.manager.userType == 2) {
                    $("#TenementStreet").append('<div style="font-size: 25px;margin-left: 100px;margin-right: 50px"><div>' + item.userName + '</div><div style="font-size: 20px;margin-top: 10px">' + item.sectorName + '</div><div style="float: right;">' + dateFormat("yyyy-MM-dd hh:mm:ss", new Date(item.createdTime)) + '</div><hr></div>');
                } else {
                    $("#TenementStreet").append('<div style="font-size: 25px;margin-left: 100px;margin-right: 50px"><div class="deletes" onclick="deleteStreet(\'' + item.streetId + '\')">删除</div><div>' + item.userName + '</div><div style="font-size: 20px;margin-top: 10px">' + item.sectorName + '</div><div style="float: right;">' + dateFormat("yyyy-MM-dd hh:mm:ss", new Date(item.createdTime)) + '</div><hr></div>');
                }
            })
        }, "json");

    }*/

    function imgShow(url) {
        layer.open({
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['1080px', '90%'], //宽高
            content: '<img src="' + url + '" width="1080px" />'
        });
        /*layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: ['auto'],
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: '<div><img src="\'+url+\'" width="800px" height="800px" /></div>'
        });*/
    }

    function deleteImg(imgId) {
        //询问框
        layer.confirm('是否删除', {
            icon: 0,
            btn: ['是', '否'] //按钮
        }, function () {
            var url = "../../guideAction/deleteImg";
            var data = {id: imgId};
            $.post(url, data, function (obj) {
                if (obj > 0) {
                    $("#" + imgId + "").remove();
                    layer.msg('删除成功', {icon: 1});
                } else {
                    layer.msg("删除失败", {icon: 2});
                }
            }, "json");
        }, function () {

        });

    }

    function deleteStreet(streetId) {
        console.info(streetId);
        var url = "../../streetAction/deleteById";
        $.post(url, {id: streetId}, function (obj) {
            if (obj.num == 1) {
                window.location.reload();//刷新页面
                layer.msg("删除成功")
            } else {
                layer.msg("删除失败")
            }

        }, "json")
    }
</script>
<script type="text/javascript">
    /**
     * 修改日历格式
     * @param dates
     * @returns {string}
     */
    function setDate(dates) {
        var date = new Date(dates);
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var sdate = date.getFullYear() + "-"
        if (month < 10) {
            sdate += "0" + month + "-";
        } else {
            sdate += month + "-";
        }
        if (day < 10) {
            sdate += "0" + day;
        } else {
            sdate += day;
        }
        return sdate;
    }
</script>
</body>
</html>